<template>
	<div class="core-frame">
		<ComponentFrame
			ref="cpnt_frame"
			class="cpnt-frame"
			:cpnt-nav-tree="state.appCpntNavTree"
			:cif-mode="state.cifMode" />
	</div>
</template>

<script lang="ts" setup>
import {
	onMounted,
	ref,
	reactive,
	toRefs,
	onBeforeMount,
	nextTick,
	watch,
	onUpdated,
	onUnmounted,
	onBeforeUnmount,
	provide
} from 'vue';
import { RUNTIME_CFG_ENUM } from '@CIF/Runtime/Global/variable';
import StorageHelper from '@CIF/Runtime/Global/storage';
import { CIF_APP_STORAGE } from '@CIF/Runtime/Global/storage';
import Notifier from '@CIF/Utils/Notifier';
import ComponentFrame from './ComponentFrame.vue';
import { usePrimaryStore } from '@/store';
import _ from 'lodash';

const store = usePrimaryStore();
const state: any = reactive({
	cifMode: RUNTIME_CFG_ENUM.PREVIEW_MODE,
	appId: '', // 应用id, 与 route 中 param 路径对应
	appName: '', // 应用名称
	// referenceComponent: [],
	// theme: {},
	appCpntNavTree: [], // 当前应用的拥有的组件，考虑应用配置里的容器组件，为树结构

	engine: null, // 组件需要知道引擎的存在，而引擎则不需要，因此激活的组件不需要提到 Renderer 里

	loader: null,

	contentWidth: '' // 三维窗口宽度，用于计算缩放比例尺
});

const cpnt_frame = ref();

function getVGE() {
	try {
		return state.engine.getVGE();
	} catch (e) {
		if (_.get(window, 'cif.config.logger.enable', false) === true) {
			console.log('CIF.R.Renderer:getVGE error', e);
		}
	}
}

onBeforeMount(() => {
	if (_.get(window, 'cif.config.logger.enable', false) === true) {
		console.log('CIF.R.Renderer:mounted');
	}
	console.log('CIF_APP_STORAGE', CIF_APP_STORAGE);
	// 从 CIF storage 里提取配置
	state.cifMode = StorageHelper.get(RUNTIME_CFG_ENUM.CIF_MODE);
	state.appId = StorageHelper.get(RUNTIME_CFG_ENUM.APPLICATION_ID);
	state.appName = StorageHelper.get(RUNTIME_CFG_ENUM.APPLICATION_NAME);

	const rendererCanvasSize = StorageHelper.get(RUNTIME_CFG_ENUM.CUSTOM_RENDERER_CANVAS_SIZE);

	if (!_.isNil(rendererCanvasSize) && !_.isEmpty(rendererCanvasSize)) {
		store.setRendererCanvasSize(rendererCanvasSize);
	}

	state.loader = StorageHelper.get(RUNTIME_CFG_ENUM.DYNAMIC_COPONENT_LOADER);
	// 未完待续
	Notifier.notifyWhenComponentFinishLoading(() => {
		// state.appCpntNavTree = StorageHelper.get(RUNTIME_CFG_ENUM.APPLICATION_COMPONENT_TREE);
		state.appCpntNavTree = store.getCpntTree;
		nextTick(() => {
			// console.log('-----------cpnt_frame', cpnt_frame);
			cpnt_frame.value.initCpntFrame();
		});
	}, 'renderer_mounted');
});
watch(
	() => state.appCpntNavTree,
	() => {
		if (_.get(window, 'cif.config.logger.enable', false) === true) {
			console.log('CIF.R.Renderer:watch.appCpntNavTree 检测到组件树发生变化');
		}
	}
);
onMounted(() => {});
onUpdated(() => {
	if (_.get(window, 'cif.config.logger.enable', false) === true) {
		console.log('CIF.R.Renderer:updated');
	}
});
onBeforeUnmount(() => {
	if (_.get(window, 'cif.config.logger.enable', false) === true) {
		console.log('CIF.R.Renderer:beforeDestroy');
	}

	if (state.loader) {
		state.loader.dispose();
		StorageHelper.set(RUNTIME_CFG_ENUM.APPLICATION_COMPONENT_TREE, []);
		// state.name = null
		// state.activeCpnts = defaultActiveCpnts
	}
});
onUnmounted(() => {
	if (_.get(window, 'cif.config.logger.enable', false) === true) {
		console.log('CIF.R.Renderer:destroyed');
	}
});
defineExpose({ ...toRefs(state), getVGE });
provide('renderer', { state });
</script>

<style lang="scss" scoped>
.core-frame {
	width: 100%;
	height: 100%;
	position: relative;
	background: rgba(0, 0, 0, 0.8);

	.core-frame {
		width: 100%;
		height: 100%;
		display: inline-block;
		position: relative;
		top: 0;
		left: 0;
		z-index: -100;
	}
}
</style>
